<template>
	<view class="template-help tn-safe-area-inset-bottom">
		<tn-nav-bar fixed customBack>
			<view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
				<text class='icon tn-icon-left'></text>
				<text class='icon tn-icon-home-capsule-fill'></text>
			</view>
			<view class="tn-flex tn-flex-col-center tn-flex-row-center ">
				<text class="tn-text-bold tn-text-xl tn-color-black">{{ navTitle }}</text>
			</view>
		</tn-nav-bar>

		<!-- <view class="" v-if="envState" :style="{paddingTop: vuex_custom_bar_height + 10 + 'px'}"
			style="padding-bottom: 240rpx;">
			<picker @change="bindPickerChange" :value="index" :range="array">
				<view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding">
					<view class="justify-content-item">
						<view class="tn-text-bold tn-text-lg">
							单位 <text class="tn-color-red tn-padding-left-xs">*</text>
						</view>
						<view class="tn-color-gray tn-padding-top-xs" v-if="index===99">
							请选择单位名称
						</view>
						<view class="tn-color-black tn-padding-top-xs" v-else>
							{{array[index]}}
						</view>
					</view>
					<view class="justify-content-item tn-text-lg tn-color-grey">
						<view class="tn-icon-right tn-padding-top"></view>
					</view>
				</view>
			</picker>
			<view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding">
				<view class="justify-content-item">
					<view class="tn-text-bold tn-text-lg">
						姓名 <text class="tn-color-red tn-padding-left-xs">*</text>
					</view>
					<view class="tn-color-gray tn-padding-top-xs tn-color-black">
						<input placeholder="请输入个人姓名" name="input" @input="inputUserName" type="nickname"
							placeholder-style="color:#AAAAAA" value=""></input>
					</view>
				</view>
				<view class="justify-content-item tn-text-xl tn-color-grey">
					<view class="tn-icon-edit tn-padding-top"></view>
				</view>
			</view>
			<view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding">
				<view class="justify-content-item">
					<view class="tn-text-bold tn-text-lg">
						手机号 <text class="tn-color-red tn-padding-left-xs">*</text>
					</view>
					<view class="tn-color-gray tn-padding-top-xs tn-color-black">
						<input placeholder="请输入个人手机号" name="input" @input="inputUserMobile" type='tel'
							placeholder-style="color:#AAAAAA" value=""></input>
					</view>
				</view>
				<view class="justify-content-item tn-text-xl tn-color-grey">
					<view class="tn-icon-phone tn-padding-top"></view>
				</view>
			</view>
			<view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding">
				<view class="justify-content-item">
					<view class="tn-text-bold tn-text-lg">
						邮箱 <text class="tn-color-red tn-padding-left-xs">*</text>
					</view>
					<view class="tn-color-gray tn-padding-top-xs tn-color-black">
						<input placeholder="请输入个人邮箱" name="input" @input="inputUserEmail" placeholder-style="color:#AAAAAA"
							value=""></input>
					</view>
				</view>
				<view class="justify-content-item tn-text-xl tn-color-grey">
					<view class="tn-icon-email tn-padding-top"></view>
				</view>
			</view>
			<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding">
				<view class="tn-flex justify-content-item">
					<view class="tn-text-bold tn-text-lg">
						描述 <text class="tn-color-red tn-padding-left-xs">*</text>
					</view>
				</view>
				<view class="tn-flex justify-content-item tn-color-gray">
					200字内
				</view>
			</view>
			<view class="tn-bg-gray--light tn-padding" style="border-radius: 10rpx;margin: 0 30rpx 30rpx 30rpx;">
				<textarea maxlength="500" placeholder="请输入个人描述信息" placeholder-style="color:#AAAAAA"
					style="height: 160rpx;width: 100%" @input="inputUserRemark"></textarea>
			</view>
			<view class="tn-flex tn-footerfixed tn-padding">
				<view class="tn-flex-1 justify-content-item tn-text-center">
					<tn-button backgroundColor="#01BEFF " padding="40rpx 0" width="90%" :fontSize="28" fontColor="#FFFFFF"
						shape="round" @click="submitUserInfo">
						<text class="">提交信息</text>
					</tn-button>
				</view>
			</view>
		</view> -->

		<!-- 内容为空开始 -->
		<view class="tui-product-empty-list" v-if="!envState">
			<view class="" style="padding: 20vh 20rpx;">
				<tn-empty mode="data" text="内容正在努力添加中"></tn-empty>
			</view>
		</view>
		<!-- 内容为空结束 -->

	</view>
</template>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import {
		submitFormInfo
	} from '@/utils/api/exam.js'
	import {
		getDevState
	} from '@/utils/api/config.js'
	export default {
		name: 'TemplateDevice',
		mixins: [template_page_mixin],
		data() {
			return {
				envState: false,
				index: 99,
				navTitle: '试题信息',
				array: ['独立开发者', '上班一族', '企业经营者', '无业游民', '其他'],
				formData: {
					company: '',
					name: '',
					mobile: '',
					email: '',
					remark: '',
					collection_uid: '',
				},
			}
		},
		onLoad(options) {
			this.formData.collection_uid = options.uid || ''
			// #ifdef MP-WEIXIN
			this.$t.mpShare = {
				share: true
			}
			if (!this.$t.mpShare.share) {
				uni.hideShareMenu()
			}
			// #endif
		},
		onShow() {
			this.getDevState()
		},
		methods: {
			getDevState() {
				getDevState().then(res => {
					this.envState = res.data.state
					if (this.envState) {
						this.navTitle = "答题留资"
					}
				})
			},
			// 用户单位
			bindPickerChange: function(e) {
				this.index = e.detail.value
				this.formData.company = this.array[this.index] || ''
			},
			// 用户姓名
			inputUserName(e) {
				this.formData.name = e.detail.value
			},
			// 用户手机号
			inputUserMobile(e) {
				this.formData.mobile = e.detail.value
			},
			// 用户邮箱
			inputUserEmail(e) {
				this.formData.email = e.detail.value
			},
			// 用户备注
			inputUserRemark(e) {
				this.formData.remark = e.detail.value
			},
			submitUserInfo() {
				console.log(this.formData)
				if (this.formData.company === '') {
					this.$func.showToast('单位不能为空')
					return
				}
				if (this.formData.name === '') {
					this.$func.showToast('姓名不能为空')
					return
				}
				if (this.formData.mobile === '') {
					this.$func.showToast('手机号不能为空')
					return
				}
				if (!/^1[3-9][0-9]{9}$/.test(this.formData.mobile)) {
					this.$func.showToast('手机号格式错误')
					return
				}
				if (this.formData.email === '') {
					this.$func.showToast('邮箱不能为空')
					return
				}
				if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/.test(this.formData.email)) {
					this.$func.showToast('邮箱格式错误')
					return
				}
				if (this.formData.remark === '') {
					this.$func.showToast('描述不能为空')
					return
				}
				if (this.formData.remark.length < 15) {
					this.$func.showToast('描述不能低于15个字符')
					return
				}
				if (this.formData.remark.length > 200) {
					this.$func.showToast('描述不能超过200个字符')
					return
				}
				let _that = this
				submitFormInfo(_that.formData).then(res => {
					if (res.code === 100) {
						_that.$func.showToast(res.msg, 3000, true)
						_that.company = ''
						_that.name = ''
						_that.mobile = ''
						_that.email = ''
						_that.remark = ''
						setTimeout(function() {
							uni.navigateBack()
						}, 2000)
						return
					}
					_that.$func.showToast(res.msg)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

		&:before {
			content: " ";
			width: 1rpx;
			height: 110%;
			position: absolute;
			top: 22.5%;
			left: 0;
			right: 0;
			margin: auto;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			opacity: 0.7;
			background-color: #FFFFFF;
		}
	}

	/* 间隔线 start*/
	.tn-strip-bottom-min {
		width: 100%;
		border-bottom: 1rpx solid #F8F9FB;
	}

	.tn-strip-top {
		width: 100%;
		border-top: 20rpx solid rgba(241, 241, 241, 0.8);
	}

	/* 间隔线 end*/

	/* 底部悬浮按钮 start*/
	.tn-tabbar-height {
		min-height: 160rpx;
		height: calc(180rpx + env(safe-area-inset-bottom) / 2);
		height: calc(180rpx + constant(safe-area-inset-bottom));
	}

	.tn-footerfixed {
		// position: fixed;
		width: 100%;
		bottom: calc(40rpx + env(safe-area-inset-bottom));
		z-index: 1024;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);
	}

	/* 底部悬浮按钮 end*/
</style>